<template>
  <div>
    <a @click="showModal">
      <LongTableColumn>{{ text }}</LongTableColumn>
    </a>
    <a-modal
      :title="title"
      centered
      :maskClosable="false"
      :width="800"
      v-model="visible"
    >
      <template slot="footer">
        <a-button @click="handleCancel">{{ $t('modal_close') }}</a-button>
      </template>
      
      <a-textarea :rows="15" readOnly v-model="data"/>
    </a-modal>
  </div>
</template>
<script>
import common from '@/global/common.js'
export default {
  props: {
    content: { type: [Object], default: () => { return {} } },
    title: { type: [String] },
  },
  data() {
    return {
      visible: false,
      data: this.getData(),
    }
  },
  watch: {
    content: function() {
      this.data = this.getData()
    }
  },
  computed: {
    text() {
      let result = this.data
      if (result.length > 500) {
        result = result.substring(0, 500)
      }
      return result
    }
  },
  methods: {
    showModal() {
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    getData() {
      let result = this.content
      if (!result) {
        return ''
      }
      result = JSON.stringify(result)
      return common.prettyJson(result)
    }
  }
}
</script>
